import 'dart:ui';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:videotop/base_view.dart';
import 'package:videotop/model/message_model.dart';
import 'package:videotop/view/item_msg_v.dart';
import 'package:provider/provider.dart';
import 'package:skeleton_text/skeleton_text.dart';
import '../myinfo.dart';
import '../screen_service.dart';
import '../util.dart';
import 'chat.dart';

class Message extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _Message();
  }
}

class _Message extends State<Message> with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;


  @override
  Widget build(BuildContext context) {
    super.build(context);
    return BaseView<MessageModel>(
      onModelReady: (model){
        model.getInit();
      },
      model: MessageModel(Provider.of<Util>(context),Provider.of<MyInfo>(context),context),
      builder: (context,model,child){
        return Scaffold(
          backgroundColor: Color(0xff3F2C9F),
          body: SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                    height: 60,
                    margin: EdgeInsets.only(left: 15),
                    child: Row(
                      children: [
                        SizedBox(
                          width: 5,
                        ),
                        Image.asset(
                          'assets/image/megpage.png',
                          width: 25,
                          height: 25,
                          fit: BoxFit.cover,
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Text(
                          'MESSAGES',
                          style: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 16,
                              fontFamily: 'my_medium'),
                        ),
                      ],
                    )),
                model.loading?Expanded(
                    child: Column(
                      children: [
                        Visibility(
                          visible: model.listmatch.length > 0,
                          child: GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: () {

                            },
                            child: Container(
                              margin: EdgeInsets.only(left: 10, right: 10),
                              padding: EdgeInsets.all(15),
                              width: ScreenService.width,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular((10)),
                                  color: Color(0xff1e154a)),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Container(
                                    margin: EdgeInsets.only(top: 5),
                                    child: Text(
                                      'New Friends',
                                      style: TextStyle(
                                          color: Colors.grey[400],
                                          fontSize: 15,
                                          fontFamily: 'my_medium'),
                                    ),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top: 15),
                                    width: ScreenService.width,
                                    height: 0.3,
                                    color: Colors.grey[800],
                                  ),
                                  Container(
                                    height: 95,
                                    margin: EdgeInsets.only(top: 20),
                                    child: ListView.builder(
                                        itemCount: model.listmatch.length,
                                        scrollDirection: Axis.horizontal,
                                        itemBuilder: (context, index) {
                                          return GestureDetector(
                                            onTap: (){
                                              model.matchTop(index);
                                            },
                                            child: Container(
                                              margin: EdgeInsets.only(right: 10),
                                              child: Column(
                                                children: [
                                                  ClipOval(
                                                    child: CachedNetworkImage(
                                                      placeholder: (context, url) => Container(
                                                        height: 52,
                                                        width: 52,
                                                        color: Color(0xff272443),
                                                        child: Center(
                                                          child: Image.asset(
                                                            'assets/image/space_bg.png',
                                                            width: 25,
                                                            height: 25,
                                                          ),
                                                        ),
                                                      ),
                                                      imageUrl:
                                                      '${model.listmatch[index].icon}?x-oss-process=image/resize,h_200',
                                                      fit: BoxFit.cover,
                                                      width: 52,
                                                      height: 52,
                                                    ),
                                                  ),
                                                  Container(
                                                    width:52,
                                                    margin: EdgeInsets.only(top: 15),
                                                    child: Text(
                                                      model.listmatch[index].nickname,
                                                      textAlign: TextAlign.center,
                                                      overflow: TextOverflow.ellipsis,
                                                      style: TextStyle(
                                                        color: Colors.white,
                                                        fontSize: 12,
                                                      ),
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          );
                                        }),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                            child: Container(
                              margin: EdgeInsets.only(left: 10, right: 10, top: 10),
                              padding: EdgeInsets.all(15),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(10),
                                      topRight: Radius.circular(10)),
                                  color: Color(0xff1e154a)),
                              child: ListView.builder(
                                  padding: EdgeInsets.only(bottom: 50),
                                  itemCount: model.listmatch.length,
                                  itemBuilder: (context, index) {
                                    return GestureDetector(
                                      behavior: HitTestBehavior.opaque,
                                      onTap: () {
                                        Navigator.push(
                                            context,
                                            MaterialPageRoute(
                                                builder: (context) => Chat(
                                                  userTable: model.list_v[index],
                                                )));
                                      },
                                      child: ItemMsg_V(
                                        icon:
                                        '${model.list_v[index].icon}?x-oss-process=image/resize,h_200',
                                        nickname: model.list_v[index].nickname,
                                        content: model.list_msg[index].content,
                                        state: model.state[index],
                                        time: model.list_msg[index].times,
                                        img: model.list_msg[index].img,
                                        video: model.list_msg[index].video,
                                      ),
                                    );
                                  }),
                            ))
                      ],
                    )):
                Expanded(child: Column(
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: 10, right: 10),
                      padding: EdgeInsets.all(15),
                      width: ScreenService.width,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular((10)),
                          color: Color(0xff1e154a)),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(top: 5),
                            child: Text(
                              'New Friends',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 15,
                                  fontFamily: 'my_medium'),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            width: ScreenService.width,
                            height: 1,
                            color: Colors.grey[800],
                          ),
                          Container(
                            height: 95,
                            margin: EdgeInsets.only(top: 20),
                            child: ListView.builder(
                                itemCount: 7,
                                scrollDirection: Axis.horizontal,
                                itemBuilder: (context, index) {
                                  return Container(
                                    margin: EdgeInsets.only(right: 10),
                                    child: Column(
                                      children: [
                                        ClipOval(
                                            child: SkeletonAnimation(
                                              child: Container(
                                                color:Colors.grey,
                                                height: 52,width: 52,
                                              ),
                                            )
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(top: 15),
                                          child: SkeletonAnimation(
                                            child: Container(
                                              color:Colors.grey,
                                              height: 10,width: 40,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  );
                                }),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                        child: Container(
                          margin: EdgeInsets.only(left: 10, right: 10, top: 10),
                          padding: EdgeInsets.all(15),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(10),
                                  topRight: Radius.circular(10)),
                              color: Color(0xff1e154a)),
                          child: ListView.builder(
                              padding: EdgeInsets.all(0),
                              itemCount: 10,
                              itemBuilder: (context, index) {
                                return Container(
                                    padding: EdgeInsets.only(top: 18),
                                    child: Column(
                                      children: <Widget>[
                                        Row(
                                          children: <Widget>[
                                            ClipOval(
                                                child: SkeletonAnimation(
                                                  child: Container(
                                                    color:Colors.grey,
                                                    height: 52,width: 52,
                                                  ),
                                                )
                                            ),
                                            Expanded(
                                              child: Container(
                                                margin: EdgeInsets.only(left: 15),
                                                child: Column(
                                                  crossAxisAlignment: CrossAxisAlignment.start,
                                                  children: <Widget>[
                                                    SkeletonAnimation(
                                                      child: Container(
                                                        color:Colors.grey,
                                                        height: 16,width: 40,
                                                      ),
                                                    ),
                                                    Container(
                                                      margin: EdgeInsets.only(top: 10),
                                                      child: SkeletonAnimation(
                                                        child: Container(
                                                          color:Colors.grey,
                                                          height: 13,width: 120,
                                                        ),
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ],
                                    )
                                );
                              }),
                        ))
                  ],
                ),)
              ],
            ),
          ),
        );
      },
    );
  }


}
